<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <form-wizard color="#5664d2">
              <tab-content title="选择数据源类型">
                <div class="row mb-2">
                  <div style="padding:0 12px;">
                    <el-radio v-model="radio" label="1">CSV文件</el-radio>
                    <el-radio v-model="radio" label="2">Excel文件</el-radio>
                    <el-radio v-model="radio" label="3">数据库</el-radio>
                    <el-radio v-model="radio" label="4">NOSQL</el-radio>
                  </div>
                </div>
                <h5 class="card-title">选择了 xxx 数据源</h5>
                <div class="row mb-3">
                  <div class="col-lg-5">
                    <div class="table-responsive">
                      <b-table
                        class="table-centered"
                        :items="dataSource"
                        :fields="dataSourceFields"
                        responsive="sm"
                        :per-page="perPage"
                        :current-page="1"
                        thead-class="thead-light"
                      >
                        <template v-slot:cell(sel)="row">
                          <el-radio v-model="dataSourceRadio" :label="row.index">{{row.value}}</el-radio>
                        </template>
                      </b-table>
                    </div>
                    <div class="row">
                      <div class="col">
                        <div class="dataTables_paginate paging_simple_numbers float-right">
                          <ul class="pagination pagination-rounded mb-0">
                            <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-2">
                    <div>

                    </div>
                  </div>
                  <div class="col-lg-5">
                    <div style="padding-top: 50px;border: 1px solid #ccc;text-align:center;">
                      <p>?</p>
                      <p>同步目标数据源</p>
                    </div>
                  </div>
                </div>
              </tab-content>
              <tab-content title="数据源目的地设置">
                <div class="row mb-3">
                  <div class="col-lg-5">
                    <h5 class="card-title">选择了 xxx 数据源</h5>
                    <div style="display:flex;align-items: center;justify-content: space-around; padding: 12px;border: 1px solid #ccc;text-align:center;">
                      <div>图片</div>
                      <div>
                        <p>MySQL-64</p>
                        <p>同步目标数据源</p>
                      </div>
                      <div>查看</div>
                    </div>
                  </div>
                  <div class="col-lg-2">
                    <div>

                    </div>
                  </div>
                  <div class="col-lg-5">
                    <h5 class="card-title">选择了 xxx 数据源</h5>
                    <div class="table-responsive">
                      <b-table
                        class="table-centered"
                        :items="destination"
                        :fields="destinationFields"
                        responsive="sm"
                        :per-page="perPage"
                        :current-page="1"
                        thead-class="thead-light"
                      >
                        <template v-slot:cell(sel)="row">
                          <el-radio v-model="destinationRadio" :label="row.index">{{row.value}}</el-radio>
                        </template>
                      </b-table>
                    </div>
                    <div class="row">
                      <div class="col">
                        <div class="dataTables_paginate paging_simple_numbers float-right">
                          <ul class="pagination pagination-rounded mb-0">
                            <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </tab-content>
              <tab-content title="数据融合同步规则">
                <div style="display:flex;align-items: center;justify-content: space-between;">
                  <div>配置同步规则</div>
                  <div>
                    <select class="form-control">
                      <option>请选择采集类型</option>
                    </select>
                  </div>
                </div>
                <div class="row mb-3">
                  <div class="col-lg-5">
                    <h5 class="card-title">目标源</h5>
                    <div class="table-responsive">
                      <b-table
                        class="table-centered"
                        :items="synchronizationSource"
                        :fields="synchronizationSourceFields"
                        responsive="sm"
                        :per-page="perPage"
                        :current-page="1"
                        thead-class="thead-light"
                      >
                        <template v-slot:cell(notNull)="row">
                          <el-checkbox v-model="row.item.notNull">非空</el-checkbox>
                        </template>
                      </b-table>
                    </div>
                  </div>
                  <div class="col-lg-2">
                    <div></div>
                  </div>
                  <div class="col-lg-5">
                    <h5 class="card-title">目的地</h5>
                    <div class="table-responsive">
                      <b-table
                        class="table-centered"
                        :items="synchronizationDestination"
                        :fields="synchronizationDestinationFields"
                        responsive="sm"
                        :per-page="perPage"
                        :current-page="1"
                        thead-class="thead-light"
                      >
                        <template v-slot:cell(notNull)="row">
                          <el-checkbox v-model="row.item.notNull">非空</el-checkbox>
                        </template>
                        <template v-slot:cell(primaryKey)="row">
                          <el-radio v-model="synchronizationDestinationKey" :label="row.item.name">{{row.value}}</el-radio>
                        </template>
                        <template v-slot:cell(del)>
                          <div>
                            <i class="ri-delete-bin-5-fill font-size-20"></i>
                          </div>
                        </template>
                      </b-table>
                    </div>
                  </div>
                </div>
              </tab-content>
              <tab-content title="数据融合测试">
                <div style="padding:100px 0;width:500px;margin:auto;">
                  <h5 class="mb-3">正在进行数据同步ing</h5>
                  <div>
                    <b-progress :value="75" :max="100" animated></b-progress>
                  </div>
                </div>
              </tab-content>
              <tab-content title="数据融合任务发布">
                <div style="padding:100px 0;width:500px;margin:auto;">
                  <i style="color:#1cbb8c;vertical-align: middle;font-size:35px;" class="ri-checkbox-circle-line"></i>
                  <span style="margin-left:30px;">恭喜您，数据融合任务已创建成功！</span>
                </div>
              </tab-content>
            </form-wizard>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
import { FormWizard, TabContent } from "vue-form-wizard";
export default {
  components: {
    Layout,
    PageHeaderNew,
    FormWizard,
    TabContent,
  },
  data () {
    return {
      items: [
        {
          text: "数据融合",
          url: "/datahouse/fuse",
        },{
          text: "新建任务",
          url: "/",
        }
      ],
      radio: "1",
      dataSource: [
        {
          name: "我是一个CSV文件",
          type: "CSV文件",
        },{
          name: "MySQL-64",
          type: "数据库",
        }
      ],
      dataSourceRadio: 0,
      totalRows: 10,
      currentPage: 1,
      perPage: 5,
      dataSourceFields: [
        { key: "sel", label: "选择项" },
        { key: "type", label: "数据源类型" },
        { key: "name", label: "数据实例名称" },
      ],
      destination: [
        {
          name: "我是一个CSV文件",
          type: "CSV文件",
        },{
          name: "MySQL-64",
          type: "数据库",
        }
      ],
      destinationRadio: 0,
      destinationFields: [
        { key: "sel", label: "选择项" },
        { key: "type", label: "数据源类型" },
        { key: "name", label: "数据实例名称" },
      ],
      synchronizationSource: [
        {
          name: "id",
          type: "bigint",
          accuracy: "30",
          scale: "0",
          notNull: true,
        },{
          name: "name",
          type: "varchar",
          accuracy: "255",
          scale: "0",
          notNull: false,
        },{
          name: "url",
          type: "varchar",
          accuracy: "255",
          scale: "0",
          notNull: false,
        },{
          name: "department",
          type: "varchar",
          accuracy: "255",
          scale: "0",
          notNull: false,
        }
      ],
      synchronizationSourceFields: [
        { key: "name", label: "字段名称" },
        { key: "type", label: "类型" },
        { key: "accuracy", label: "精度" },
        { key: "scale", label: "标度" },
        { key: "notNull", label: "Not Null" },
      ],
      synchronizationDestination: [
        {
          name: "id",
          type: "bigint",
          accuracy: "30",
          scale: "0",
          notNull: true,
        },{
          name: "name",
          type: "varchar",
          accuracy: "255",
          scale: "0",
          notNull: false,
        },{
          name: "url",
          type: "varchar",
          accuracy: "255",
          scale: "0",
          notNull: false,
        },{
          name: "department",
          type: "varchar",
          accuracy: "255",
          scale: "0",
          notNull: false,
        }
      ],
      synchronizationDestinationKey: "id",
      synchronizationDestinationFields: [
        { key: "name", label: "字段名称" },
        { key: "type", label: "类型" },
        { key: "accuracy", label: "精度" },
        { key: "scale", label: "标度" },
        { key: "notNull", label: "Not Null" },
        { key: "primaryKey", label: "主键" },
        { key: "del", label: "删除" },
      ],
    }
  },
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-radio__input.is-checked .el-radio__inner,
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    border-color: #5664d2;
    background: #5664d2;
}
::v-deep .el-radio__input.is-checked+.el-radio__label,
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #5664d2;
}
</style>
